<template>
  <div class="recomend-container">
    <div class="box">
      <div class="box-title">
        <div class="left">
          <IconFont name="heart-fill" size="15" color="#fa2c19"></IconFont>
          <div class="text">热映推荐</div>
        </div>
        <div class="right">
          <IconFont name="people" size="15" color="#fa2c19"></IconFont>
        </div>
      </div>
      <div class="box-content">
        <div class="box-content-item">
          <image
            src="https://gw.alicdn.com/tfscom/i3/O1CN01s4djbH29FutyK4fzY_!!6000000008039-0-alipicbeacon.jpg_300x300.jpg"
            style="height: 118px; width: 80px; border-radius: 5px"
          ></image>
          <div class="item-name">哥斯拉大战金刚2:帝国崛起</div>
          <nut-button type="primary" size="mini">特惠</nut-button>
        </div>
        <div class="box-content-item">
          <image
            src="https://gw.alicdn.com/i4/O1CN01zYtvCj1IXcZQwdhXm_!!6000000000903-0-alipicbeacon.jpg_480x480Q30s150.jpg"
            style="height: 118px; width: 80px; border-radius: 5px"
          ></image>
          <div class="item-name">周处除三害</div>
          <nut-button type="primary" size="mini">特惠</nut-button>
        </div>
        <div class="box-content-item">
          <image
            src="https://gw.alicdn.com/i2/O1CN01XZwM5P1u4iycl2qgW_!!6000000005984-0-alipicbeacon.jpg_480x480Q30s150.jpg"
            style="height: 118px; width: 80px; border-radius: 5px"
          ></image>
          <div class="item-name">被我弄丢的你</div>
          <nut-button type="primary" size="mini">特惠</nut-button>
        </div>
        <div class="box-content-item">
          <image
            src="https://gw.alicdn.com/tfscom/i2/O1CN01FJb26a1sOIfv6VI4V_!!6000000005756-0-alipicbeacon.jpg"
            style="height: 118px; width: 80px; border-radius: 5px"
          ></image>
          <div class="item-name">灿烂的她</div>
          <nut-button type="primary" size="mini">特惠</nut-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
//   ,
//   ,
//   ,
import { IconFont } from "@nutui/icons-vue-taro";
</script>
<style lang="less">
.recomend-container {
  margin-top: 25px;
  padding: 0 25px;
  .box {
    padding: 20px;
    border-radius: 20px;
    background-color: #fff;

    .box-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;
        font-size: 30px;
        font-weight: 700;
        color: #15181d;
        .text {
          margin-left: 5px;
        }
      }
    }
    .box-content {
      margin-top: 25px;
      display: flex;
      // justify-content: flex-start;
      justify-content: space-around;
      //   align-items: center;
      .box-content-item:nth-child(n + 2) {
        margin-left: 15px;
      }
      .box-content-item {
        display: flex;
        // flex: 1;
        flex-direction: column;
        align-items: center;
        .item-name {
          margin: 15px 0;
          font-size: 24px;
          width: 150px;
          display: -wekbit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap; /* 确保文字在一行内显示 */
          overflow: hidden; /* 超出容器部分隐藏 */
          text-overflow: ellipsis; /* 使用省略符号表示被截断的文本 */
        }
      }
    }
  }
}
</style>
